import { PageContainer, ProTable } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Checkbox,
  Radio,
  Space,
  Row,
  Col,
} from "antd";
import { connect, history } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useEffect, useState, useRef } from "react";
import { getUrlParam } from "@/utils/utils";

// import AddModal from "./AddModal";
// import CopyModal from "./CopyModal";

const Page = (props) => {
  const { dispatch, submitLoading, startTime, endTime, userId, data } = props;
  const [form] = Form.useForm();
  const addRef = useRef(null);
  const copyRef = useRef(null);

  useEffect(() => {
    dispatch({
      type: `${namespace}/pageInit`,
      params: {
        userId: getUrlParam("id"),
        grantCycle: decodeURIComponent(getUrlParam("grantCycle")),
      },
    });
  }, []);

  return (
    <PageContainer>
      <ProTable
        title={() => [
          <Row gutter={32}>
            <Col>
              <h3>员工:{data.userNickName}</h3>
            </Col>
            <Col>
              <h3>手机号码:{data.tel}</h3>
            </Col>
            <Col>
              <h3>计算周期:{data.occurDate}</h3>
            </Col>
            <Col>
              <h3>总课时费:¥{data.totalClassHourCost}</h3>
            </Col>
          </Row>,
        ]}
        scroll={{ x: 1500 }}
        search={false}
        toolBarRender={false}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params: {
              ...params,
              userId,
              startTime,
              endTime,
            },
          });
        }}
        pagination={{
          showSizeChanger: true,
        }}
        columns={calcColumns()}
      />
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
